import { PolylineEdge, PolylineEdgeModel, h } from '@logicflow/core';


class CurvedEdgeView extends PolylineEdge {
  static extendKey = 'curvedEdge';
  getEdge() {
    const {
      strokeWidth,
      stroke,
      strokeDashArray,
    } = this.props.model.getEdgeStyle();
    const { points } = this.props.model;
    const points2 = points.split(' ').map((p) => p.split(',').map(a => Number(a)));
    const [startX, startY] = points2[0];
    let d = `M${startX} ${startY}`;
    // 1) 如果一个点不为开始和结束，则在这个点的前后增加弧度开始和结束点。
    // 2) 判断这个点与前一个点的坐标
    //    如果x相同则前一个点的x也不变，
    //    y为（这个点的y 大于前一个点的y, 则 为 这个点的y - 5；小于前一个点的y, 则为这个点的y+5）
    //    同理，判断这个点与后一个点的x,y是否相同，如果x相同，则y进行加减，如果y相同，则x进行加减
    // todo: 好丑，看看怎么优化下
    const space = 10;
    for (let i = 1; i < points2.length - 1; i++) {
      const [preX, preY] = points2[i - 1];
      const [currentX, currentY] = points2[i];
      const [nextX, nextY] = points2[i + 1];
      if (currentX === preX && currentY !== preY) {
        const y = currentY > preY ? currentY - space : currentY + space;
        d = `${d} L ${currentX} ${y}`;
      }
      if (currentY === preY && currentX !== preX) {
        const x = currentX > preX ? currentX - space : currentX + space;
        d = `${d} L ${x} ${currentY}`;
      }
      d = `${d} Q ${currentX} ${currentY}`;
      if (currentX === nextX && currentY !== nextY) {
        const y = currentY > nextY ? currentY - space : currentY + space;
        d = `${d} ${currentX} ${y}`;
      }
      if (currentY === nextY && currentX !== nextX) {
        const x = currentX > nextX ? currentX - space : currentX + space;
        d = `${d} ${x} ${currentY}`;
      }
    }
    const [endX, endY] = points2[points2.length - 1];
    d = `${d} L ${endX - 10} ${endY}`;
    return h(
      'path',
      {
        d,
        strokeWidth,
        stroke,
        fill: 'none',
        strokeDashArray,
      },
    );
  }

  getArrow() {
    const { model } = this.props;
    // 根据类型渲染连接样式
    if (!model.properties.type) {
      const { endPoint } = this.props.model
      return h('circle', {
        cx: endPoint.x - 5,
        cy: endPoint.y ,
        r: 4,
        stroke:"#015478",
        fill: 'none'
      })
    }
  }
}

class CurvedEdgeModel extends PolylineEdgeModel {

  setAttributes() {
    const { properties: { isShow, type } } = this;
    if (!type) {
      this.visible = isShow
    }
  }

  getEdgeStyle() {
    const style = super.getEdgeStyle();
    style.stroke = '#015478';
    style.strokeWidth = '1'
    style.strokeDasharray = '10 10';
    return style;
  }
}


const CurvedEdge = {
  type: 'CurvedEdge',
  view: CurvedEdgeView,
  model: CurvedEdgeModel
}

export default CurvedEdge;